<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\captcha\Captcha;
use common\widgets\file_upload\FileUpload;   //引入扩展
$this->title = '用户登录';
$this->params['breadcrumbs'][] = $this->title;

?>
			<?php $id = $_GET['id'];?>
			<section class="upbox">
				<div class="minabox">
					<form method="post" action="<?= yii\helpers\Url::to(['meetingenroll/create', 'id' => $id]);?>" enctype="multipart/form-data">
					<input name="_csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
	                <div class="boxline1">
	                	<span>名称：</span>
	                	<input type="text" name="name" value="" placeholder="请输入名称" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline1">
	                	<span>性别：</span>
	                	<input type="text" name="sex" value="" placeholder="请输入性别" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline1">
	                	<span>电话：</span>
	                	<input type="text" name="phone" value="" placeholder="请输入电话号码" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline1">
	                	<span>电子邮箱：</span>
	                	<input type="text" name="email" value="" placeholder="请输入电子邮箱" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline1">
	                	<span>单位名称：</span>
	                	<input type="text" name="company" value="" placeholder="请输入单位名称" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline1">
	                	<span>地址：</span>
	                	<input type="text" name="address" value="" placeholder="请输入地址" />
	                	<span class="xing">*</span>
	                </div>
	                <div class="boxline2">
	                	<span>人物头像：</span>
	                    <div class="midinput">
	                        <span class="btn upload">-请添加-<input type="file" class="upload_pic" name="label_img" id="upload" /></span>   
	                    </div>
	                    <span class="xing">*</span>
	                    <canvas class="all_cva" id="cvs"></canvas>
	                </div>
                </div>
                <div class="buzhou"><input class="nextbtn" value="提交" type="submit" /></div>
            </form>
			</section>
			
			
<script>
//获取上传按钮
var input1 = document.getElementById("upload"); 
 
if(typeof FileReader==='undefined'){ 
     //result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
     input1.setAttribute('disabled','disabled'); 
}else{ 
     input1.addEventListener('change',readFile,false); 
     /*input1.addEventListener('change',function (e){
     	console.log(this.files);//上传的文件列表
     },false); */
}
function readFile(){ 
	var file = this.files[0];//获取上传文件列表中第一个文件
	if(!/image\/\w+/.test(file.type)){
	//图片文件的type值为image/png或image/jpg
		alert("文件必须为图片！");
		return false; 
	} 
	// console.log(file);
	var reader = new FileReader();//实例一个文件对象
	reader.readAsDataURL(file);//把上传的文件转换成url
	//当文件读取成功便可以调取上传的接口
	reader.onload = function(e){ 
		// console.log(this.result);//文件路径
		// console.log(e.target.result);//文件路径
		/*var data = e.target.result.split(',');
		var tp = (file.type == 'image/png')? 'png': 'jpg';
		var imgUrl = data[1];//图片的url，去掉(data:image/png;base64,)
		//需要上传到服务器的在这里可以进行ajax请求
		// console.log(imgUrl);
		// 创建一个 Image 对象 
		var image = new Image();
		// 创建一个 Image 对象 
		// image.src = imgUrl;
		image.src = e.target.result;
		image.onload = function(){
			document.body.appendChild(image);
		}*/

		var image = new Image();
		// 设置src属性 
		image.src = e.target.result;
		var max=200;
		// 绑定load事件处理器，加载完成后执行，避免同步问题
		image.onload = function(){ 
			// 获取 canvas DOM 对象 
			var canvas = document.getElementById("cvs"); 
			// 如果高度超标 宽度等比例缩放 *= 
			/*if(image.height > max) {
				image.width *= max / image.height; 
				image.height = max;
			} */
			// 获取 canvas的 2d 环境对象, 
			var ctx = canvas.getContext("2d"); 
			// canvas清屏 
			ctx.clearRect(0, 0, canvas.width, canvas.height); 
			// 重置canvas宽高
			/*canvas.width = image.width;
			canvas.height = image.height;
			if (canvas.width>max) {canvas.width = max;}*/
			// 将图像绘制到canvas上
			// ctx.drawImage(image, 0, 0, image.width, image.height);
			ctx.drawImage(image, 0, 0, 250, 150);
			// 注意，此时image没有加入到dom之中
		};  
	}
};
</script>